<template>
  <div class="app-container">
    <div style="display: flex;flex-wrap: nowrap;">
      <h3>{{ proxy.$t('route.community') }}</h3>
      <div style="width: 10px;"></div>
      <h6>{{ proxy.$t('route.show1') }}</h6>
    </div>
    <el-card>
      <el-form style="display: flex;flex-wrap: nowrap;" label-width="80px" :inline="true">
        <el-form-item>
          <label style="width: 100%;">{{ proxy.$t('adv.xqmc') }}</label>
          <el-input v-model="queryData.name" :placeholder="proxy.$t('adv.qsr')"></el-input>
        </el-form-item>
        <el-form-item>
          <label style="width: 100%;">{{ proxy.$t('adv.kfname') }}</label>
          <el-input v-model="queryData.developer" :placeholder="proxy.$t('adv.qsr')"></el-input>
        </el-form-item>
        <el-form-item>
          <label style="width: 100%;">{{ proxy.$t('adv.wyname') }}</label>
          <el-input v-model="queryData.estate" :placeholder="proxy.$t('adv.qsr')"></el-input>
        </el-form-item>
        <el-form-item>
          <label style="width: 100%;">{{ proxy.$t('adv.createTime') }}</label>
          <el-date-picker v-model="queryData.create_time" type="datetimerange" range-separator="-"
            :start-placeholder="proxy.$t('adv.qxz')" :end-placeholder="proxy.$t('adv.qxz')" />
        </el-form-item>
      </el-form>
      <div style="height: 50px;"></div>
      <div style="display: flex;justify-content: end;">
        <el-button type="primary" @click="onSearch">{{ proxy.$t('table.search') }}</el-button>
        <el-button @click="onReset">{{ proxy.$t('table.reset') }}</el-button>
      </div>
    </el-card>
    <div style="height: 30px;"></div>
    <!-- 第二张卡片 -->
    <el-card>
      <div style="display: flex;justify-content: end;"><el-button type="primary" @click="addFormRef.isShow = true">{{
        proxy.$t('table.add') }}</el-button></div>
      <div style="height: 30px;"></div>
      <!-- 表格 -->
      <Table :table="communityTable" :tableData="list" @del="del" @edit="addFormRef.edit($event)">
        <template #thumb="{ row }">
          <div style="width: 100%;" @click="seeBigImg(row)">
            <img :src="row.thumb" alt="" style="width: 100%;">
          </div>
        </template>
        <template #create_time="{ row }">
          {{ new Date(row.create_time).toLocaleString() }}
        </template>
      </Table>
      <!-- 分页 -->
      <Pagination v-model:pageNum="queryData.current" v-model:pageSize="queryData.pageSize" :total="total"
        @initData="initData" />
    </el-card>
    <addForm ref="addFormRef" @initData="initData" />
    <!-- 列表查看大图 -->
    <el-dialog v-model="isSeeImg" title="预览" append-to-body width="40%" @close="dialogImageUrl = ''">
      <img style="width: 100%;" :src="dialogImageUrl" />
    </el-dialog>
  </div>
</template>

<script setup>
import addForm from './addForm.vue';
import { ElMessage } from 'element-plus'
import { communityTable } from '@/hooks/community/index.js'
import Table from '@/components/Table/table';
import Pagination from '@/components/Table/Pagination';
import { ref, toRaw, onMounted, getCurrentInstance } from 'vue'
import { getListApi, delListApi } from '@/api/community/index.js'
// ============================================================================
const { proxy } = getCurrentInstance()
const defaultQueryData = {
  current: 1,
  pageSize: 2,
  name: '',
  developer: '',
  estate: '',
  create_time: '',
}
// 搜索数据
let queryData = reactive({ ...defaultQueryData })
// 总数
const total = ref(0)
// 列表数据
const list = ref([])
const addFormRef = ref(null)
// ============================================================================================
const initData = async () => {
  // console.log(toRaw(queryData));
  queryData.create_time = queryData.create_time !== '' ? queryData.create_time.map(item => +item).join(',') : queryData.create_time
  const { data: { count, rows } } = await getListApi(toRaw(queryData))
  // console.log(rows);
  const tabList = rows.map(({ thumb, ...item }) => ({ thumb: import.meta.env.VITE_APP_BASE_IMG + (thumb ? thumb.split(',')[0] : '/public/dist/static/empty.1e2fbc24.png'), ...item }))
  total.value = count
  list.value = tabList
}

onMounted(() => {
  initData()
})

// 搜索
const onSearch = () => {
  queryData.current = 1
  initData()
  ElMessage.success('搜索成功')
}

// 重置
const onReset = () => {
  queryData = Object.assign(queryData, defaultQueryData)
  initData()
  ElMessage.success('重置成功')
}

// 删除
const del = async (id) => {
  // console.log(id);
  await delListApi(id)
  ElMessage.success('删除成功')
  if (queryData.current > 1 && list.value.length === 1) queryData.current--
  initData()
}

// 列表点击看图
let isSeeImg = ref(false)
let dialogImageUrl = ref('')
const seeBigImg = (row) => {
  dialogImageUrl.value = row.thumb
  isSeeImg.value = true
}
</script>

<style lang="scss" scoped>
.app-container {
  padding: 2%;
}
</style>